/**
 * 正确的设置元素属性
 */
function shouldSetAsProps(el, key, value) {
    // 特殊处理
    if (key === 'form' && el.tagName === 'INPUT') return false
    // 兜底
    return key in el
}

// function mountElement(vnode, container) {
//     const el = createElement(vnode.type)
//     // 省略 children 的处理

//     if (vnode.props) {
//         for (const key in vnode.props) {
//             const value = vnode.props[key]
//             // 使用 shouldSetAsProps 函数判断是否应该作为 DOM Properties 设置
//             if (shouldSetAsProps(el, key, value)) {
//                 const type = typeof el[key]
//                 if (type === 'boolean' && value === '') {
//                     el[key] = true
//                 } else {
//                     el[key] = value
//                 }
//             } else {
//                 el.setAttribute(key, value)
//             }
//         }
//     }

//     insert(el, container)
// }

function mountElement(vnode, container) {
    const el = createElement(vnode.type)
    if (typeof vnode.children === 'string') {
        setElementText(el, vnode.children)
    } else if (Array.isArray(vnode.children)) {
        vnode.children.forEach(child => {
            patch(null, child, el)
        })
    }

    if (vnode.props) {
        for (const key in vnode.props) {
            // 调用 patchProps 函数即可
            patchProps(el, key, null, vnode.props[key])
        }
    }

    insert(el, container)
}


const renderer = createRenderer({
    createElement(tag) {
        return document.createElement(tag)
    },
    setElementText(el, text) {
        el.textContent = text
    },
    insert(el, parent, anchor = null) {
        parent.insertBefore(el, anchor)
    },
    // 将属性设置相关操作封装到 patchProps 函数中，并作为渲染器选项传递
    patchProps(el, key, prevValue, nextValue) {
        if (shouldSetAsProps(el, key, nextValue)) {
            const type = typeof el[key]
            if (type === 'boolean' && nextValue === '') {
                el[key] = true
            } else {
                el[key] = nextValue
            }
        } else {
            el.setAttribute(key, nextValue)
        }
    }
})